﻿<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="utf-8">
    <title>Product components</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="James Dennis">

	<link href="../../css/common.css" rel="stylesheet">
    <link href="../component_page.css" rel="stylesheet">

    <!--[[ HTML5 shim, for IE6-8 support of HTML5 elements ]]-->
    <!--[if lt IE 9]><script src="assets/js/html5shiv.js"></script><![endif]-->
    <!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->

    <script src="../../js/jquery-1.8.3.min.js"></script>
    <script src="../../js/jquery.hoverIntent.minified.js"></script>
	<script src="../../js/scripts.js"></script>

    
    <!--Component Styles & Javascript-->
    <link href="http://content.gjwtitmuss.co.uk/1/1/css/product_component.css" rel="stylesheet">
    <script src="http://content.gjwtitmuss.co.uk/1/1/js/product_component.js"></script>


</head>

<body>         

<h1>Product Stamp components</h1>

<div class="product_views">
    <ul>
        <li>Views:</li>
        <li class=""><a href="javascript:;" class="grid"><span>Grid</span></a></li>
        <li class="active"><a href="javascript:;" class="list"><span>List</span></a></li>
    </ul>
</div>

<hr />

<div class="grid">
<h2>Product Short</h2Product>

<section class="component">
  <!-- begin component  - short view -->
  <article itemscope itemtype="http://schema.org/Product" class="product short">
     <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
      <span class="promoIcon hot"></span>
      <img class="prodImg" itemprop="image" src="http://dummyimage.com/30/cccccc/ffffff.gif&text=Product+(short)" alt="Product name" />
      <h1 class="prodName" itemprop="name">Product name</h1>
      <div class="prodOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <span class="prodPrice" itemprop="price">&pound;9.99</span>
    </div>
    </a>
  </article>
  <!-- end component -->  
</section>

<hr />

<h2>Product Thumb</h2>

<section class="component">
  <!-- begin component  - thumbnail view -->
  <article itemscope itemtype="http://schema.org/Product" class="product thumb clearfix">
    <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
      <span class="promoIcon hot"></span>
      <img class="prodImg" itemprop="image" src="http://dummyimage.com/75/cccccc/ffffff.gif&text=Product+(thumb)" alt="" />
    </a>
    <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
      <h1 class="prodName" itemprop="name">Product name</h1>
    </a>
    <div class="aggregateRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <span class="prodRating" itemprop="ratingValue" data-rating="3"><span class="gold">★★★</span>★★</span>
      <a href="/GJWTitmuss/product_review.shtml"><span class="prodReviews" itemprop="reviewCount">188 reviews</span></a>
    </div>
    <div class="prodOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <a href="javascript:;" class="prodDeliveryIcon free" itemprop="DeliveryMethod"></a>
        <span class="prodPrice" itemprop="price">&pound;9.99</span>
    </div>
  </article>
  <!-- end component -->  
</section>  

<hr />

<h2>Product Mini Stamp</h2>

<section class="component white_bg">
  <!-- begin component  - thumbnail view -->
  <article itemscope itemtype="http://schema.org/Product" class="product mini stamp">
    <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
        <span class="promoIcon hot"></span>
        <img class="prodImg" itemprop="image" src="http://dummyimage.com/150/cccccc/ffffff.gif&text=Product+(stamp)" alt="" />
    </a>
    <div class="aggregateRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <span class="prodRating" itemprop="ratingValue" data-rating="3"><span class="gold">★★★</span>★★</span>
      <a href="/GJWTitmuss/product_review.shtml"><span class="prodReviews" itemprop="reviewCount">188 reviews</span></a>
    </div>
    <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
      <h1 class="prodName" itemprop="name">Product name</h1>
    </a>
    <div class="prodOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <a href="javascript:;" class="prodDeliveryIcon free" itemprop="DeliveryMethod"></a>
        <span class="prodPrice" itemprop="price">&pound;9.99</span>
    </div>
  </article>
  <!-- end component -->  
</section>  

<hr />

<h2>Product Summary Stamp</h2>

<section class="component"> 
  <!-- begin component  - summary view -->
  <article itemscope itemtype="http://schema.org/Product" class="product summary stamp">
    <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
      <span class="promoIcon hot"></span>
      <img class="prodImg" itemprop="image" src="http://dummyimage.com/150/cccccc/ffffff.gif&text=Product+(stamp)" alt="" />
    </a>
    <div class="aggregateRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      <span class="prodRating" itemprop="ratingValue" data-rating="3"><span class="gold">★★★</span>★★</span>
      <a href="/GJWTitmuss/product_review.shtml"><span class="prodReviews" itemprop="reviewCount">188 reviews</span></a>
    </div>
    <a itemprop="url" href="/GJWTitmuss/product_detail.shtml">
      <h1 class="prodName" itemprop="name"><a itemprop="url" href="#">Product name</a></h1>
    </a>
    <div itemprop="description" class="description">
      <p>Product Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo molestie magna fringilla sodales. </p>
    </div>
    <div class="prodOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <a href="javascript:;" class="prodDeliveryIcon free" itemprop="DeliveryMethod"></a>
        <span class="prodPrice" itemprop="price">&pound;9.99</span>
    </div>
  </article>
  <!-- end component -->      
</section>

</div>

<hr />

<h2>Product Detail</h2>

<section class="component"> 
  <!-- begin component - detailed view -->
  <article itemscope itemtype="http://schema.org/Product" class="product detail">
    <span class="promoIcon hot"></span>
    <img class="prodImg" itemprop="image" src="http://dummyimage.com/300/cccccc/ffffff.gif&text=Product+(detail)" alt="" />
    <h1 class="prodName" itemprop="name">Product name</h1>
    <a itemprop="manufacturer" href="/GJWTitmuss/product_detail.shtml">Manufacturer</a>
    <div class="prodOffer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <span class="prodPrice" itemprop="price">&pound;9.99</span>
    </div>
    <div class="aggregateRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      Rated <span itemprop="ratingValue">3</span>
      based on <a href="/GJWTitmuss/product_review.shtml"><span class="prodReviews" itemprop="reviewCount">188 customer reviews</span></a>
      <meta itemprop="worstRating" content = "1">
      <meta itemprop="bestRating" content = "5">
    </div>    
    <section itemprop="description">
      <h2>Product description</h2>
    </section>
    <section>
      <h2>Customer reviews</h2>
      <article itemprop="review" itemscope itemtype="http://schema.org/Review">
        <span class="prodName" itemprop="name">Review Title</span> -
        by <span itemprop="author">Reviewer</span>,
        <meta itemprop="datePublished" content="2012-11-13">November 13, 2012
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <span itemprop="ratingValue">1</span>
        </div>
        <span itemprop="description">
          The rating text
        </span>
      </article>      
    </section>
  </article>
  <!-- end component -->        
</section>


</body>
</html>
